Skip to content

fix(ai-react): preserve generation devtools identity - #1032

Open
Jonesxq wants to merge 1 commit into
TanStack:mainfrom
Jonesxq:fix/react-generation-devtools-identity
Open

fix(ai-react): preserve generation devtools identity#1032
Jonesxq wants to merge 1 commit into
TanStack:mainfrom
Jonesxq:fix/react-generation-devtools-identity

Conversation

@Jonesxq

@Jonesxq Jonesxq commented Jul 31, 2026

Copy link
Copy Markdown

Changes

Fixes #1002.

Caller-supplied devtools options could override the framework and hook name
reported by React generation hooks, causing generation activity to be
misidentified in Devtools.

  • Keep framework and hook identity authoritative for useGeneration.
  • Preserve each specialized generation hook's own identity and outputKind.
  • Continue forwarding caller-supplied display metadata.
  • Add unit and E2E regression coverage for hostile identity overrides.

Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm run test:pr.

Test plan

  • NX_BASE=origin/main pnpm test:pr
  • vitest run tests/devtools-identification.test.ts from packages/ai-react (2 passed)
  • playwright test devtools-generation-hooks.spec.ts --workers=4 from testing/e2e (3 passed)

Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • Bug Fixes

    • React generation hooks now consistently report their correct framework, hook name, and output type in Devtools.
    • Custom Devtools metadata is preserved while built-in hook identity details remain accurate.
    • Standard and specialized generation hooks now provide consistent identity information.
  • Tests

    • Added coverage for standard and specialized generation hooks.
    • Expanded end-to-end validation for custom generation hook registration and metadata handling.

@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: ff6f018e-3363-4e64-b383-0dc67613a231

📥 Commits

Reviewing files that changed from the base of the PR and between 888e8b7 and 576b549.

📒 Files selected for processing (10)
  • .changeset/react-generation-devtools-identity.md
  • packages/ai-react/src/use-generate-audio.ts
  • packages/ai-react/src/use-generate-image.ts
  • packages/ai-react/src/use-generate-speech.ts
  • packages/ai-react/src/use-generation.ts
  • packages/ai-react/src/use-summarize.ts
  • packages/ai-react/src/use-transcription.ts
  • packages/ai-react/tests/devtools-identification.test.ts
  • testing/e2e/src/routes/devtools-generation-hooks.tsx
  • testing/e2e/tests/devtools-generation-hooks.spec.ts
🚧 Files skipped from review as they are similar to previous changes (9)
  • testing/e2e/tests/devtools-generation-hooks.spec.ts
  • .changeset/react-generation-devtools-identity.md
  • packages/ai-react/src/use-generation.ts
  • packages/ai-react/src/use-summarize.ts
  • packages/ai-react/src/use-generate-audio.ts
  • packages/ai-react/src/use-generate-image.ts
  • packages/ai-react/src/use-transcription.ts
  • packages/ai-react/tests/devtools-identification.test.ts
  • packages/ai-react/src/use-generate-speech.ts

📝 Walkthrough

Walkthrough

@tanstack/ai-react adds a shared DevTools identity helper. Generation hooks now preserve React and hook-name metadata while allowing custom metadata to pass through. Unit and end-to-end tests cover standard and custom generation hooks.

Changes

React DevTools identity

Layer / File(s) Summary
Identity helper and metadata composition
packages/ai-react/src/use-generation.ts
Adds useGenerationWithDevtoolsIdentity and applies caller metadata before authoritative React identity fields.
Specialized generation hook integration
packages/ai-react/src/use-generate-audio.ts, packages/ai-react/src/use-generate-image.ts, packages/ai-react/src/use-generate-speech.ts, packages/ai-react/src/use-summarize.ts, packages/ai-react/src/use-transcription.ts
Updates specialized hooks to pass hookName and outputKind through the shared helper.
Identity validation and release metadata
packages/ai-react/tests/devtools-identification.test.ts, testing/e2e/src/routes/devtools-generation-hooks.tsx, testing/e2e/tests/devtools-generation-hooks.spec.ts, .changeset/react-generation-devtools-identity.md
Tests DevTools metadata overrides, custom generation registration, technical names, and the patch release.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

  • TanStack/ai#1000: Applies the same DevTools identity ordering fix to the ai-octane generation hooks.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 40.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the fix to preserve React generation Devtools identity.
Description check ✅ Passed The description includes the required changes, checklist, testing details, and release impact sections with relevant information.
Linked Issues check ✅ Passed The changes enforce authoritative React Devtools identity, preserve caller metadata, and add regression coverage for issue #1002.
Out of Scope Changes check ✅ Passed The changeset, implementation updates, and unit and E2E tests directly support the linked issue and PR objectives.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ai-react/tests/devtools-identification.test.ts`:
- Around line 1-4: Split devtools-identification.test.ts into colocated
*.test.ts files beside use-generation.ts and use-generate-image.ts, assigning
each test to the hook it covers. Remove the tests from the
packages/ai-react/tests directory while preserving their existing assertions and
setup.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b3dd1031-217a-407a-83e6-bdff1b789017

📥 Commits

Reviewing files that changed from the base of the PR and between 1cb04d5 and 76fa812.

📒 Files selected for processing (10)
  • .changeset/react-generation-devtools-identity.md
  • packages/ai-react/src/use-generate-audio.ts
  • packages/ai-react/src/use-generate-image.ts
  • packages/ai-react/src/use-generate-speech.ts
  • packages/ai-react/src/use-generation.ts
  • packages/ai-react/src/use-summarize.ts
  • packages/ai-react/src/use-transcription.ts
  • packages/ai-react/tests/devtools-identification.test.ts
  • testing/e2e/src/routes/devtools-generation-hooks.tsx
  • testing/e2e/tests/devtools-generation-hooks.spec.ts

Comment on lines +1 to +4
import { renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useGenerateImage } from '../src/use-generate-image'
import { useGeneration } from '../src/use-generation'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Place each unit test beside its covered hook.

Split this file into tests alongside packages/ai-react/src/use-generation.ts and packages/ai-react/src/use-generate-image.ts. The current packages/ai-react/tests/ location does not follow the required colocated test layout.

As per coding guidelines, “Place unit tests in *.test.ts files alongside the source they cover.”

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ai-react/tests/devtools-identification.test.ts` around lines 1 - 4,
Split devtools-identification.test.ts into colocated *.test.ts files beside
use-generation.ts and use-generate-image.ts, assigning each test to the hook it
covers. Remove the tests from the packages/ai-react/tests directory while
preserving their existing assertions and setup.

Source: Coding guidelines

@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch from 76fa812 to 576b549 Compare August 10, 2026 09:06
@coderabbitai

coderabbitai Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@tombeckenham

Copy link
Copy Markdown
Contributor

Maintainer sweep: rebased onto main (force-with-lease). CI approval handled if it was waiting.

@nx-cloud

nx-cloud Bot commented Aug 10, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 576b549

Command Status Duration Result
nx run-many --targets=build --exclude=examples/... ✅ Succeeded 7s View ↗

☁️ Nx Cloud last updated this comment at 2026-08-10 09:09:19 UTC

@pkg-pr-new

pkg-pr-new Bot commented Aug 10, 2026

Copy link
Copy Markdown

Open in StackBlitz

@tanstack/ai

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai@1032

@tanstack/ai-acp

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-acp@1032

@tanstack/ai-angular

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-angular@1032

@tanstack/ai-anthropic

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-anthropic@1032

@tanstack/ai-bedrock

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-bedrock@1032

@tanstack/ai-byteplus

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-byteplus@1032

@tanstack/ai-claude-code

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-claude-code@1032

@tanstack/ai-client

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-client@1032

@tanstack/ai-code-mode

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-code-mode@1032

@tanstack/ai-code-mode-skills

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-code-mode-skills@1032

@tanstack/ai-codex

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-codex@1032

@tanstack/ai-devtools-core

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-devtools-core@1032

@tanstack/ai-durable-stream

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-durable-stream@1032

@tanstack/ai-elevenlabs

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-elevenlabs@1032

@tanstack/ai-event-client

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-event-client@1032

@tanstack/ai-fal

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-fal@1032

@tanstack/ai-gemini

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-gemini@1032

@tanstack/ai-grok

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-grok@1032

@tanstack/ai-grok-build

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-grok-build@1032

@tanstack/ai-groq

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-groq@1032

@tanstack/ai-isolate-cloudflare

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-isolate-cloudflare@1032

@tanstack/ai-isolate-daytona

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-isolate-daytona@1032

@tanstack/ai-isolate-node

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-isolate-node@1032

@tanstack/ai-isolate-quickjs

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-isolate-quickjs@1032

@tanstack/ai-isolate-quickjs-bun

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-isolate-quickjs-bun@1032

@tanstack/ai-mcp

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-mcp@1032

@tanstack/ai-memory

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-memory@1032

@tanstack/ai-mistral

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-mistral@1032

@tanstack/ai-ollama

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-ollama@1032

@tanstack/ai-openai

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-openai@1032

@tanstack/ai-opencode

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-opencode@1032

@tanstack/ai-openrouter

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-openrouter@1032

@tanstack/ai-persistence

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-persistence@1032

@tanstack/ai-preact

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-preact@1032

@tanstack/ai-react

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-react@1032

@tanstack/ai-react-ui

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-react-ui@1032

@tanstack/ai-sandbox

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-sandbox@1032

@tanstack/ai-sandbox-cloudflare

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-sandbox-cloudflare@1032

@tanstack/ai-sandbox-daytona

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-sandbox-daytona@1032

@tanstack/ai-sandbox-docker

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-sandbox-docker@1032

@tanstack/ai-sandbox-local-process

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-sandbox-local-process@1032

@tanstack/ai-sandbox-sprites

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-sandbox-sprites@1032

@tanstack/ai-sandbox-vercel

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-sandbox-vercel@1032

@tanstack/ai-solid

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-solid@1032

@tanstack/ai-solid-ui

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-solid-ui@1032

@tanstack/ai-svelte

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-svelte@1032

@tanstack/ai-utils

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-utils@1032

@tanstack/ai-vue

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-vue@1032

@tanstack/ai-vue-ui

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-vue-ui@1032

@tanstack/openai-base

npm i https://pkg.pr.new/TanStack/ai/@tanstack/openai-base@1032

@tanstack/preact-ai-devtools

npm i https://pkg.pr.new/TanStack/ai/@tanstack/preact-ai-devtools@1032

@tanstack/react-ai-devtools

npm i https://pkg.pr.new/TanStack/ai/@tanstack/react-ai-devtools@1032

@tanstack/solid-ai-devtools

npm i https://pkg.pr.new/TanStack/ai/@tanstack/solid-ai-devtools@1032

commit: 576b549

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

useGeneration (ai-react): caller-supplied devtools can override the framework identification

2 participants